<template>
    <view>
        <swiper
            class="swiper" 
            circular 
            indicator-dots
            autoplay
        >
            <swiper-item @click="goyclj">
                <image 
                    src="https://jdzy.tianxunwang.com/business/image/jdzy/lk/lk1.jpg" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="swiper-img"
                ></image>
            </swiper-item>
        </swiper>
        <view>
            <view class="title">
                当季热门
            </view>
            <view class="img-box-1" @click="goyclj">
                <image
                    src="https://jdzy.tianxunwang.com/business/image/jdzy/lk/lk2.jpg" 
                    :draggable="false"
                    mode="scaleToFill"
                    class="swiper-img"
                ></image>
            </view>
            <!-- <view class="content">
                <view class="content-view content-view-3">
                    <image
                        src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/banner/banner-8.png" 
                        :draggable="false"
                        mode="scaleToFill"
                        class="content-img"
                    ></image>
                </view>
                <view class="content-view content-view-2">
                    <view class="content-view content-view-3">
                        <image
                            src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/banner/banner-8.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="content-img"
                        ></image>
                    </view>
                    <view class="content-view content-view-3">
                        <image
                            src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/banner/banner-8.png" 
                            :draggable="false"
                            mode="scaleToFill"
                            class="content-img"
                        ></image>
                    </view>
                </view>
            </view> -->
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onTabItemTap } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref, onMounted, watchEffect, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    onShow(() => {
        goyclj()
    })
    const goyclj = () => {
        uni.navigateToMiniProgram({
          appId: 'wx615df38a95f21e55',
          path: 't/1.html',
          success(res) {
            // 打开成功
          }
        })
    }
</script>
<style lang="scss" scoped>
   .swiper {
       height: 760rpx;
       box-sizing: border-box;
       padding: 10rpx;
   }
   .swiper-img {
       width: 100%;
       height: 100%;
       border-radius: 20rpx;
   }
   .title {
       box-sizing: border-box;
       padding: 20rpx 20rpx;
       font-size: 36rpx;
       font-weight: bold;
       letter-spacing: 20rpx;
       color: rgb(44, 44, 44);
   }
   .content {
       width: 100%;
       height: 500rpx;
       box-sizing: border-box;
       padding: 0 40rpx;
       display: flex;
       .content-view {
           flex: 1;
       }
       .content-view-2 {
           display: flex;
           flex-direction: column;
       }
       .content-view-3 {
          box-sizing: border-box;
          padding: 10rpx;
       }
       .content-img {
           width: 100%;
           height: 100%;
           border-radius: 20rpx;
       }
   }
   .img-box-1 {
       width: 100%;
       height: 500rpx;
       box-sizing: border-box;
       padding: 10rpx;
   }
</style>
